/* Base colors */
:root {
	--centerpoint-blue: #0091DA;
	--centerpoint-energy-blue: #0099DC;
	--centerpoint-dark-blue: #0074AD;
	--centerpoint-dark-blue-hover: #005D8A;
	--centerpoint-bright-blue: #82E3FF;
	--centerpoint-light-blue: #C5F1FF;
	--centerpoint-highlighter-blue: #8DF7E1;
	--centerpoint-lime-green: #00DE9B;
	--centerpoint-white: #FFFFFF;
	--centerpoint-snow: #F7F8F9;
	--centerpoint-light-grey: #E0E1E8;
	--centerpoint-dark-grey: #BABCC8;
	--centerpoint-black: #000000;
	--centerpoint-cherry: #FF1100;
	--centerpoint-pumpkin: #FF7800;
	--centerpoint-tangerine: #FE9914;
	--centerpoint-lemon: #FFC211;
	--centerpoint-rosemary: #5C5900;
	--centerpoint-sage: #D1D190;
	--centerpoint-lime: #018749;
	--centerpoint-mint: #019587;
	--centerpoint-blueberry: #0D2B8D;
	--centerpoint-ghost: #D7D7D7;
	--centerpoint-error-red: #D11111;
}
.dark_mode {
	--centerpoint-white: #191A1F;
	--centerpoint-snow: #242A32;
	--centerpoint-black: #E1E1E2;
	--centerpoint-light-grey: #363636;
	--centerpoint-dark-blue: #1594C6;
	--centerpoint-bright-blue: #044C6B;
	--centerpoint-dark-grey: #707174;
	--centerpoint-error-red: #DD4040;
}
.dark-mode-hidden {
	display: block !important;
}
.light-mode-hidden {
	display: none !important;
}
.dark_mode .dark-mode-hidden {
	display: none !important;
}
.dark_mode .light-mode-hidden {
	display: block !important;
}

/* Desktop Styles */
@media screen and (min-width: 768px) {
	h1 {
		font-style: normal;
		font-weight: 700;
		font-size: 30px;
		line-height: 32px;
	}
	h2 {
		font-style: normal;
		font-weight: 300;
		font-size: 28px;
		line-height: 30px;
	}
	h3 {
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 22px;
	}
	h4 {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
	}
	h5 {
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 20px;
	}
	h6 {
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
	}
	p {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 18px;
	}
	.hide-mobile {
		display: block;
	}
	.hide-desktop {
		display: none;
	}
}

/* Mobile Styles */
@media screen and (max-width: 767px) {
	h1 {
		font-style: normal;
		font-weight: 700;
		font-size: 24px;
		line-height: 26px;
	}
	h2 {
		font-style: normal;
		font-weight: 300;
		font-size: 22px;
		line-height: 24px;
	}
	h3 {
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 22px;
	}
	h4 {
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 22px;
	}
	h5 {
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 20px;
	}
	h6 {
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
	}
	p {
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 18px;
	}
	.hide-mobile {
		display: none;
	}
	.hide-desktop {
		display: block;
	}
}
.hidden {
	display: none !important;
}

.button-row {
	display: flex;
	margin-bottom: 32px;
}
.button {
	border-radius: 16px;
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	font-family: "proxima-nova", sans-serif;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.button-primary {
	width: 192px;
	height: 44px;
	background: var(--centerpoint-dark-blue);
	color: var(--centerpoint-white);
	border: none;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.button-primary:hover {
	background: var(--centerpoint-dark-blue-hover);
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.button-primary.disabled {
	pointer-events: none;
	background: var(--centerpoint-dark-grey);
}
.button-primary .dijitButtonNode {
	color: var(--centerpoint-white) !important;
	background-color: transparent !important;
	border: none !important;
	background-image: none !important;
	box-shadow: none !important;
}
.button-secondary {
	width: 192px;
	height: 44px;
	background: var(--centerpoint-white);
	color: var(--centerpoint-black);
	border: none;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.button-secondary:hover {
	background: var(--centerpoint-snow);
}
.dark_mode .button-secondary {
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 1.0);
}
@media screen and (max-width: 767px) {
	.button-primary, .button-secondary {
		width: 182px;
	}
}

.highlighted-text {
	position: relative;
	z-index: 2;
}
.static-highlight {
	font-weight: 700;
}
.highlighted-text:hover::before, .static-highlight::before, .dijitSelectLabel::before {
	background-color: var(--centerpoint-highlighter-blue);
	width: 100%;
	height: 12px;
	content: "";
	z-index: -1;
	position: absolute;
	border-radius: 18px;
	top: 12px;
	opacity: 0.4;
	color: var(--centerpoint-black);
}

/* Map Search Bar */
.search-container {
	display: flex;
}
.map-search {
	justify-content: flex-start;
	margin-right: 8px;
	width: 360px;
	background: var(--centerpoint-white);
}
.map-search .esri-search__input {
	background: var(--centerpoint-snow);
	border: 1px solid var(--centerpoint-light-grey);
	border-right: none;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	height: 40px;
	font-family: "proxima-nova", sans-serif;
	color: var(--centerpoint-black);
	padding: 11px 15px 11px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}
.map-search .esri-search__input::placeholder {
	color: var(--centerpoint-black);
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	font-family: 'proxima-nova', sans-serif;
}
.map-search .esri-search__input:focus, .map-search .esri-search__clear-button:focus {
	outline: none;
}
.map-search .esri-search__clear-button {
	background: var(--centerpoint-snow);
	border-top: 1px solid var(--centerpoint-light-grey);
	border-bottom: 1px solid var(--centerpoint-light-grey);
	height: 40px;
}
.map-search .esri-search__submit-button {
	background: var(--centerpoint-white);
	width: 40px;
	border: 1px solid var(--centerpoint-light-grey);
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	height: 40px;
	color: var(--centerpoint-black);
}
.map-search .esri-search--show-suggestions .esri-search__suggestions-menu {
	border-radius: 8px;
	padding: 11px 14px 9px 12px;
	font-family: "proxima-nova", sans-serif;
	z-index: 10000;
}
.map-search .esri-search__suggestions-menu {
	background-color: var(--centerpoint-white);
	color: var(--centerpoint-black);
}
.dark_mode .map-search .esri-search__suggestions-menu {
	border: 1px solid var(--centerpoint-light-grey);
}
.map-search .esri-search__suggestions-menu .esri-menu__list-item {
	border: none;
	padding: 4px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
}
.map-search .esri-search__suggestions-menu .esri-menu__list-item:hover {
	background-color: var(--centerpoint-snow);
	font-weight: 700;
}
.claro .find-location-button {
	margin: 0;
}
.claro .find-location-button {
	width: 40px;
	height: 40px;
	border: 1px solid var(--centerpoint-light-grey);
	border-radius: 16px;
	background: var(--centerpoint-white);
	box-shadow: none;
	background-image: url('../images/LocationArrow.svg');
	background-repeat: no-repeat;
	padding: 9px 8px;
	background-position: center;
}
.dark_mode.claro .find-location-button {
	background-image: url('../images/DM_LocationArrow.svg');
}
.claro .find-location-button .esri-icon::before{
	content: none;
}
@media screen and (max-width: 767px) {
	.map-search {
		width: 100%;
	}
}

html, body {
	font-family: "proxima-nova", sans-serif;
	margin: 0;
}

.prevent-scrolling {
	overflow: hidden;
}

/* to hide ESRI Attributes at bottom of the page */
.esri-attribution__powered-by, .esri-attribution__sources{
	display: none;
}

#content {
	overflow-y: auto;
}
@media screen and (max-width: 767px) {
	html, body {
		overflow: hidden;
		height: 100%;
	}
	#content {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	#content.scrollable {
		overflow: auto;
	}
}

.claro .dijitContentPane {
	padding: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

#leftPane {
	width: 488px;
	padding: 40px 0;
	background: var(--centerpoint-white);
	z-index: 10;
	overflow: visible;
	position: relative !important;
	top: inherit !important;
	height: fit-content !important;
	min-height: calc(100vh - 190px);
	box-sizing: border-box;
}
#leftPane .title {
	margin-top: 0;
	margin-bottom: 24px;
	margin-left: 40px;
	color: var(--centerpoint-black);
}
#leftPane .search-container {
	margin-bottom: 26px;
	margin-left: 40px;
}
#leftPane .button-row .button-primary {
	margin-right: 24px;
	margin-left: 40px;
}
#leftPane .sidebar-toggle {
	width: 24px;
	height: 60px;
	border-top-right-radius: 16px ;
	border-bottom-right-radius: 16px;
	position: absolute;
	left: 488px;
	top: 45%;
	background: var(--centerpoint-white);
	border: none;
	cursor: pointer;
}

/* Header */
.header {
	padding: 12px 40px 20px 40px !important;
	height: 48px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	overflow: visible;
	position: relative !important;
	background: var(--centerpoint-white);
}
.header .header-title-bar {
	display: flex;
	align-items: center;
	color: var(--centerpoint-black);
}
.header .logo {
	height: 38px;
	width: 108px;
	cursor: pointer;
}
@media screen and (min-width: 768px) {
	.header {
		width: calc(100vw - 80px) !important;
	}
}
@media screen and (max-width: 767px) {
	.header {
		height: 151px;
		padding: 16px 24px 20px 24px !important;
		display: block;
	}
	.header.maintenance-header {
		height: 35px;
		padding-bottom: 17px;
	}
	.header .header-title-bar {
		margin-bottom: 16px;
	}
	.header .logo {
		width: 99px;
		height: 35px;
		display: block;
		margin-right: 17px;
	}
	.header .header-title-bar .title {
		padding: 6px 0 6px 15px;
		margin: 0;
		border-left: 1px solid var(--centerpoint-light-grey);
	}
	.header .button-row {
		margin-bottom: 0;
	}
	.header .search-container {
		margin-bottom: 16px;
	}
	.header .button-row .button-primary {
		margin-right: 16px;
	}
	.header .button-row .button-primary,.button-secondary {
		width: 50%;
	}
	.header .mobile-menu-button {
		float: right;
		width: 35px;
		height: 35px;
		margin: 0;
	}
	.header .mobile-menu-button .dijitButtonNode {
		border: none;
		background: none;
		box-shadow: none;
		padding: 0;
	}
	.mobile-menu {
		top: -306px;
		height: 306px !important;
		padding: 17px 24px !important;
		position: absolute;
		width: 100%;
		z-index: 20;
		background: var(--centerpoint-white);
		box-sizing: border-box;
	}
	.mobile-menu .close-mobile-menu-button {
		border: none;
		background: none;
		width: 32px;
		height: 32px;
		float: right;
	}
}

#mapPane {
	overflow: hidden;
	width: calc(100% - 18px) !important;
	left: 28px !important;
}
@media screen and (min-width: 768px) {
	#mapPane {
		position: fixed !important;
		height: 100vh !important;
		top: 0 !important;
	}
}
@media screen and (max-width: 767px) {
	#mapPane {
		height: 95% !important;
		width: 100% !important;
		left: 0 !important;
	}
}
#mapView {
	height: 100%;
}
#mapView .esri-overlay-surface {
	background-color: #A6E4FF;
	opacity: 0.2;
}
#mapView .toggler-button {
	position: absolute;
	top: 104px;
	right: 44px;
}
#mapView .reports-button {
	position: absolute;
	top: 184px;
	right: 44px;
}
#mapView .toggler-button .dijitButtonText {
	padding: 0;
	text-align: center;
	margin-top: 8px;
}
#mapView .toggler-button .dijitButtonText .light-mode-hidden {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}
#mapView .reports-button .dijitButtonContents {
	margin-top: 8px;
}
#mapView .reports-button .dijitButtonNode, #mapView .toggler-button .dijitButtonNode, #mapView #homeButtonContainer {
	background-color: var(--centerpoint-white);
	width: 40px;
	height: 40px;
	border-radius: 16px;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
	padding: 0;
	margin: 0;
	border: none;
	background-image: none;
}

#mapView .esri-ui-top-right {
	top: 215px;
	right: 30px;
}
#mapView .esri-zoom {
	width: 40px;
	height: 81px;
	border-radius: 16px;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
	background-color: var(--centerpoint-white);
}
#mapView .esri-interactive,.esri-disabled {
	width: 40px;
	height: 40px;
	color: var(--centerpoint-black);
}
#mapView .esri-zoom .esri-widget--button {
	background-color: var(--centerpoint-white);
}
#mapView .esri-zoom .esri-widget--button:first-child {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}
#mapView .esri-zoom .esri-widget--button:last-child {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}
#mapView .esri-zoom .esri-widget--button:hover {
	background-color: var(--centerpoint-white);
}
#mapView .esri-zoom .esri-widget--button .esri-icon {
	font-size: 14px;
}
.esri-icon-plus:before {
	content: url('../images/PlusIcon.svg');
}
.dark_mode .esri-icon-plus:before {
	content: url('../images/DM_PlusIcon.svg');
}
.dark_mode .esri-disabled .esri-icon-plus:before {
	filter: invert(100%) sepia(3%) saturate(1555%) hue-rotate(180deg) brightness(97%) contrast(81%);
}
.esri-disabled .esri-icon-plus:before {
	filter: invert(100%) sepia(1%) saturate(1371%) hue-rotate(358deg) brightness(86%) contrast(111%);
}
.esri-icon-minus:before {
	background-image: url('../images/MinusIcon.svg');
    background-size: 14px 14px;
}
.dark_mode .esri-icon-minus:before {
	background-image: url('../images/DM_MinusIcon.svg');
}
.esri-disabled .esri-icon-minus:before {
	filter: invert(100%) sepia(1%) saturate(1371%) hue-rotate(358deg) brightness(86%) contrast(111%);
}
.dark_mode .esri-disabled .esri-icon-minus:before {
	filter: invert(100%) sepia(3%) saturate(1555%) hue-rotate(180deg) brightness(97%) contrast(81%);
}
#mapView .home-button {
	top: 317px;
	right: 44px;
}
#mapView .home-button .esri-icon-home {
	content: url('../images/HomeIcon.svg');
}
.dark_mode #mapView .home-button .esri-icon-home {
	content: url('../images/DM_HomeIcon.svg');
}
#mapView .home-button .esri-rotating {
	animation: none;
	transform: none;
}
#mapView .esri-view-surface--inset-outline:focus::after {
	outline: none;
}
@media screen and (max-width: 767px) {
	#mapView {
		height: calc(100% - 187px - 65px);
	}
	#mapView .toggler-button {
		top: 24px;
		right: 24px;
	}
	#mapView .reports-button {
		top: 104px;
		right: 24px;
	}
	#mapView .esri-ui-top-right {
		top: 138px;
		right: 10px;
	}
	#mapView .home-button {
		top: 243px;
		right: 24px;
	}
}

/* for hiding Icons in TOC tree and indenting text */
.dijitIconFile, .dijitLeaf {
	visibility: hidden;
	margin-left: -18px;
}

/* for basetoggle map */
.map-overlay-bottom-right {
	position: absolute;
	bottom: 1.5rem;
	right: 1rem;
	z-index: 40;
}

/* for geocode text box	*/
.map-overlay-top-right {
	position: absolute;
	top: 1.5rem;
	right: 1rem;
	z-index: 40;
}

/* for home button */
.map-overlay-top-left {
    position: absolute;
    top: 6.0rem;
    left: 1.45rem;
    z-index: 40;
}

/* for toggle map */

.esri-basemap-toggle {
	width: 40px;
	height: 40px;
	border-radius: 16px;
	background-color: transparent;
	justify-content: center;

}
.esri-basemap-toggle__container, .esri-basemap-toggle__image {
	 display: none;
	 width: 0px;
	 height: 0px;
	 position: absolute;
	 top: 0;
	 left: 0;
	 overflow: hidden;
	 background-color: transparent;
}

.mobile-outage-pane {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	background: var(--centerpoint-white);
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
	min-height: 422px;
	z-index: 0;
	padding: 8.53px 0 32px 0;
}
.mobile-outage-pane .rectangle {
	margin: 0 auto 7px auto;
	width: 36px;
	height: 6px;
	background: #EBEBEB;
	border-radius: 200px;
}
/* Footer */
.footer {
	background: var(--centerpoint-snow);
	padding: 32px 27px 32px 40px !important;
	height: 46px;
	color: var(--centerpoint-black);
}
.footer.bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.footer .footer-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.footer .footer-bar .twitter-link {
	color: var(--centerpoint-black);
	text-decoration: none;
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	display: inline-flex;
	align-items: center;
	margin-top: 13px;
}
.footer .footer-bar .twitter-link img {
	margin-right: 8px;
}
.footer .footer-links {
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: auto;
}
.footer .footer-links a {
	margin-right: 32px;
	color: var(--centerpoint-black);
	text-decoration: none;
}
.footer .copyright {
	font-weight: 400;
	font-size: 10px;
	line-height: 12.18px;
	color: var(--centerpoint-black);
}
@media screen and (min-width: 768px) {
	.bottom-bar {
		position: relative !important;
		top: 0 !important;
		width: 100vw;
	}
}
@media screen and (max-width: 767px) {
	.bottom-bar {
		position: absolute !important;
	}
	.bottom-bar.initial-height {
		top: calc(100% - 126px) !important;
	}
	.footer {
		padding: 32px 24px 32px 24px !important;
		flex-direction: column;
		align-items: flex-start;
		height: auto;
	}
	.footer .mobile-footer-header {
		font-weight: 900;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 0.1rem;
		margin-bottom: 12px;
	}
	.footer .footer-bar {
		display: block;
		margin-bottom: 32px;
	}
	.footer .footer-bar .twitter-link {
		margin-top: 20px;
	}
	.footer .footer-links {
		width: 100%;
	}
	.footer .footer-links a {
		margin-right: 0;
		width: 50%;
		float: left;
		margin-bottom: 12px;
	}
}

.information-title {
	font-weight: 900;
	font-size: 14px;
	line-height: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	padding-bottom: 16px;
	width: 242px;
	border-bottom: 2px dotted var(--centerpoint-black);
	margin-bottom: 16px;
	color: var(--centerpoint-black);
}
.information-title img {
	margin-right: 8px;
	width: 30px;
	height: 24px;
}
.outage-number-display {
	font-weight: 300;
	font-size: 36px;
	line-height: 44px;
	margin-bottom: 1px;
	color: var(--centerpoint-black);
}
b.outage-number-display {
	font-weight: 600;
	display: block;
}
.outage-date-display {
	font-weight: 300;
	font-size: 36px;
	line-height: 44px;
	margin-bottom: 1px;
	color: var(--centerpoint-black);
}
.outage-period-display {
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
	color: var(--centerpoint-black);
}
.outage-overview {
	padding: 0 40px;
	margin-top: 64px;
	color: var(--centerpoint-black);
}
.outage-overview .overview-disclaimer {
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 16px;
	color: var(--centerpoint-black);
}
.outage-overview .information-row {
	display: flex;
}
.outage-overview .information-row .information-column {
	flex: 50%;
}
.outage-overview .information-row .information-column:last-child {
	margin-left: 42px;
}
.outage-overview .updated-time {
	margin: 0;
	
}
.advisory {
	margin-top: 32px;
}
.outage-details .outage-pan-section {
	border-top: 1px solid #EBEBEB;
	border-bottom: 1px solid #EBEBEB;
	padding: 16.33px 40px;
	display: flex;
	align-items: center;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #373737;
}
.dark_mode .outage-details .outage-pan-section {
	border-color: var(--centerpoint-light-grey);
	color: var(--centerpoint-black);
}
.outage-details .outage-pan-section .pan-button {
	margin: 0;
	height: 40px;
	width: 40px;
}
.outage-details .outage-pan-section .pan-button-container {
	border-radius: 16px;
	width: 81px;
	height: 40px;
	background: var(--centerpoint-white);
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
	display: flex;
	margin-right: 14px;
}
.outage-details .outage-pan-section .pan-button .dijitButtonNode {
	width: 40px;
	height: 40px;
	background: var(--centerpoint-white);
	border: none;
	padding: 0;
	box-shadow: none;
	display: grid;
	align-items: center;
}
.dark_mode .outage-details .outage-pan-section .pan-button .dijitButtonNode {
	border: 1px solid var(--centerpoint-light-grey);
}
.outage-details .outage-pan-section .pan-button img {
	filter: saturate(100%) brightness(0);
	margin-bottom: 2px;
}
.dark_mode .outage-details .outage-pan-section .pan-button img {
	filter: invert(92%) sepia(2%) saturate(77%) hue-rotate(202deg) brightness(102%) contrast(86%);
}
.outage-details .outage-pan-section .pan-button .dijitButtonNode:hover {
	background: var(--centerpoint-snow);
}
.outage-details .outage-pan-section .previous-button .dijitButtonNode {
	border-radius: 16px 0 0 16px;

}
.outage-details .outage-pan-section .next-button .dijitButtonNode {
	border-radius: 0 16px 16px 0;
	border-left: 1px solid var(--centerpoint-light-grey);
}
.outage-details .outage-details-information {
	padding: 36px 40px 0 40px;
}
.outage-details .outage-disclaimer {
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	font-style: italic;
	margin-top: 16px;
	margin-bottom: 24px;
	padding: 0 40px; 
	color: var(--centerpoint-black);
}

.outage-planned-message{
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	margin-top: 16px;
	margin-bottom: 16px;
	color: var(--centerpoint-black);
}
.outage-details .restoration-tracker {
	padding: 8px 40px 0 40px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: var(--centerpoint-black);
}
.outage-details .restoration-tracker .pizza-tracker {
	position: relative;
}
.outage-details .restoration-tracker .pizza-tracker img {
	width: 100%;
}
.outage-details .restoration-tracker .pizza-tracker .estimated-restoration-time-section {
	position: absolute;
	top: 35%;
	left: 0;
	right: 0;
	text-align: center;
}
.outage-details .restoration-tracker .pizza-tracker .estimated-restoration-time-section .restoration-time {
	font-size: 48px;
	font-weight: 800;
	line-height: 58px;
}
.outage-details .restoration-tracker .pizza-tracker .estimated-restoration-time-section .restoration-period {
	font-size: 20px;
	font-weight: 500;
	line-height: 44px;
	text-transform: uppercase;
}
.outage-details .restoration-tracker .pizza-tracker .estimated-restoration-time-section .pending-assessment {
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
	margin-top: 9px;
	margin-bottom: 8px;
}
.outage-details .restoration-tracker .pizza-tracker .estimated-restoration-time-section .restoration-date {
	font-size: 12px;
	font-weight: 800;
	line-height: 15px;
	text-transform: uppercase;
	opacity: 50%;
	width: 145px;
	margin: auto;
}
.outage-details .restoration-tracker h6 {
	margin-top: 12px;
	margin-bottom: 24px;
}
.outage-details .restoration-tracker .button {
	margin: 16px auto 0 auto;
}
.outage-details .restoration-tracker .suppression-message {
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	margin-top: 8px;
}
.no-outages-display {
	padding: 0 40px;
	color: var(--centerpoint-black);
}
.no-outages-display .no-outage-title {
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 16px;
}
.no-outages-display h6 {
	margin: 16px 0;
}
.outage-label {
	margin-bottom: 19px;
	display: inline-block;
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	color: var(--centerpoint-black);
}
.outage-label.static-highlight::before {
	top: 9px;
}
@media screen and (max-width: 767px) {	
	.outage-details .outage-pan-section {
		border-top: none;
		padding-top: 7px;
		margin-bottom: 24px;
	}
	.outage-details {
		padding: 0;
		margin-bottom: 8px;
	}
	.outage-details .outage-details-information {
		padding: 0 35px 0 25px;
		margin-bottom: 8px;
	}
	.outage-details .outage-details-information .information-title {
		line-height: 16px;
		color: var(--centerpoint-black);
	}
	.outage-details .outage-disclaimer {
		padding: 0 36px 0 24px;
		margin-top: 8px;
		margin-bottom: 16px;
	}
	.outage-details .restoration-tracker {
		padding: 8px 25px 0 25px;
	}
	.information-title {
		line-height: 16px;
		padding-bottom: 12px;
		
	}
	.outage-overview {
		padding: 0 24px;
		margin-top: 11px;
	}
	.outage-overview .information-row {
		margin-bottom: 4px;
	}
	.outage-overview .information-row .information-column:first-child {
		margin-right: 16px;
	}
	.outage-overview .information-row .information-column:last-child {
		margin-left: 0;
	}
	.outage-overview .information-row .information-column .outage-stat {
		height: 50%;
	}
	.advisory {
		margin-top: 24px;
	}
	.outage-details .restoration-tracker .pizza-tracker {
		max-width: 336px;
		margin: auto;
	}
	.outage-details .restoration-tracker .pizza-tracker .estimated-restoration-time-section {
		top: 30%;
	}
	.outage-details .restoration-tracker h6 {
		margin-bottom: 32px;
	}
	.no-outages-display {
		padding: 8px 24px;
	}
}

.claro .dialog {
	min-width: 100vw !important;
	height: 100vh !important;
	top: 0 !important;
	left: 0 !important;
	border: none;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.25);
	display: flex;
}
.claro .dialog .dijitDialogTitleBar {
	display: none;
}
.claro .dialog .dijitDialogPaneContent {
	position: relative !important;
	margin: auto;
	border: none;
	color: var(--centerpoint-black) !important;
	width: 596px !important;
	padding: 40px;
	background-color: var(--centerpoint-white);
	border-radius: 16px;
}
.claro #reportDlg .dijitDialogPaneContent {
	height: 466px !important;
}
.claro #noSearchResultsDialog .dijitDialogPaneContent {
	height: 60px !important;
	padding-top: 43px;
}
.dialog .dialog-label {
	font-weight: 400;
	font-size: 24px;
	line-height: 26px;
	display: flex;
	align-items: center;
	height: 26px;
	margin-bottom: 16px;
}
#noSearchResultsDialog .dialog-label {
	font-weight: 700;
}
.dialog .close-dialog-button {
	border: none;
	background: none;
	width: 32px;
	height: 32px;
	margin-left: auto;
	cursor: pointer;
}
.claro #reportDlg .dialog-label {
	margin-bottom: 18px;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect {
	border: none;
	background-color: transparent;
	background-image: none;
	margin-left: 8px;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect:focus {
	outline: none;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect .dijitButtonContents {
	border: none;
	font-weight: 700;
	font-size: 24px;
	line-height: 26px;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect .dijitSelectLabel {
	position: relative;
	z-index: 1;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect .dijitSelectLabel::before {
	top: 18px;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect .dijitDownArrowButton {
	background: none;
	border: none;
}
.claro #reportDlg .dijitDialogPaneContent .dijitSelect .dijitArrowButtonInner {
	background-image: url('../images/DownArrow.svg');
	background-position: center;
}

.dark_mode #reportDlg .dijitDialogPaneContent .dijitSelect .dijitArrowButtonInner {
	background-image: url('../images/DM_DownArrow.svg');
	background-position: center;
}
.claro .dijitPopup {
	border-radius: 8px;
	border: none;
	height: 52px !important;
	width: 152px;
	background-color: var(--centerpoint-white);
	padding: 11px 14px 9px 12px;
	margin-top: -20px;
}
.claro.dark_mode .dijitPopup {
	border: 1px solid var(--centerpoint-light-grey);
}
.claro .dijitPopup .dijitMenu {
	width: 100% !important;
	border: none;
	background-color: var(--centerpoint-white);
}
.claro .dijitPopup .dijitMenu .dijitMenuItem {
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	padding: 4px;
	color: var(--centerpoint-black);
}
.claro .dijitPopup .dijitMenu .dijitMenuItem td {
	border-color: var(--centerpoint-white);
}
.claro .dijitPopup .dijitMenu .dijitMenuItemSelected td {
	border: none;
	background-color: var(--centerpoint-snow);
	border-radius: 4px;
	font-weight: 700;
	background-image: none;
	color: var(--centerpoint-black);
}
.claro .dijitSelectSelectedOption {
	display: none;
}
.claro #reportDlg .reports-search-bar {
	display: flex;
	max-width: 290px;
	width: 100%;
	height: 40px;
	margin-bottom: 16px;
}
.claro #reportDlg .reports-search-bar .dijitTextBox {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	border: 1px solid var(--centerpoint-light-grey);
	background-color: var(--centerpoint-snow);
	width: calc(100% - 40px);
	padding: 11px 12px;
}
.claro #reportDlg .reports-search-bar .dijitTextBox .dijitInputContainer {
	background-color: transparent;
	height: 100%;
	width: 100%;
}
.claro #reportDlg .reports-search-bar .dijitTextBox .dijitInputContainer .dijitPlaceHolder {
	color: var(--centerpoint-black);
	padding: 0;
	line-height: 18px;
	font-style: initial;
}
.claro #reportDlg .reports-search-bar .dijitTextBox .dijitInputContainer .dijitInputInner {
	color: var(--centerpoint-black);
	height: 100%;
	width: 100%;
}
.claro #reportDlg .reports-search-bar .dijitTextBox .dijitInputContainer .dijitInputInner::-webkit-input-placeholder {
	color: var(--centerpoint-black);
	padding: 0;
	line-height: 18px;
	font-style: initial;
}
.claro #reportDlg .reports-search-bar .icon-container {
	padding: 11px;
	border: 1px solid var(--centerpoint-light-grey);
	border-left: none;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	cursor: pointer;
	background: var(--centerpoint-white);
	color: var(--centerpoint-black);
}
.claro #reportDlg .reports-search-bar .icon-container img {
	width: 16px;
	height: 16px;
}
.dark_mode.claro #reportDlg .reports-search-bar .icon-container img {
	filter: invert(92%) sepia(2%) saturate(77%) hue-rotate(202deg) brightness(102%) contrast(86%);
}
.claro .dijitDialogPaneContent .dijitContentPane {
	overflow: hidden;
	height: 100% !important;
	width: 100% !important;
}
.claro #reportDlg .dojoxGrid {
	border: none;
	box-shadow: none;
	margin-top: 16px;
	height: 360px !important;
}
.claro #reportDlg .dojoxGrid .dojoxGridMasterView {
	height: 90%;
}
.claro #reportDlg .dojoxGrid .dojoxGridView {
	height: 100% !important;
}
.claro #reportDlg .dojoxGrid .dojoxGridScrollbox {
	height: 100% !important;
}
.claro #reportDlg .reports-updated-time {
	margin-top: 8px;
}
.claro #reportDlg .dojoxGridHeader {
	background: none !important;
	border-bottom: 1px solid var(--centerpoint-bright-blue);
	padding-bottom: 8px;
}
.claro #reportDlg th {
	border: none;
	background: none !important;
	font-size: 12px;
	font-weight: 900;
	line-height: 16px;
	letter-spacing: 0.1em;
	box-shadow: none !important;
	text-align: center;
	padding: 0;
	vertical-align: middle;
	cursor: pointer;
}
.claro #reportDlg td {
	border: none;
	text-align: center;
	background-color: var(--centerpoint-white) !important;
	color: var(--centerpoint-black) !important;
}
.claro #reportDlg th .dojoxGridSortNode {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: center;
}
.claro #reportDlg th .dojoxGridSortNode .dojoxGridArrowButtonChar {
	margin-right: 0;
	font-size: 9px;
}
.claro #reportAnOutageDialog .dijitDialogPaneContent {
	/* height: fit-content !important; */
	/* To fix the Visibity issues with Report Modal for some screen Sizes- By Sreeharshan*/
	height: 90%;
}
.claro #reportAnOutageDialog .streetlight-outage-report .blue-highlight {
	font-weight: 700;
	color: var(--centerpoint-dark-blue);
}
.claro #reportAnOutageDialog .emergency-notification .blue-highlight {
	font-weight: 700;
	color: var(--centerpoint-dark-blue);
}
.claro #reportAnOutageDialog .number-input-section {
	margin-top: 24px;
	margin-bottom: 16px;
}
.claro #reportAnOutageDialog .bold-label {
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
	text-transform: uppercase;
}
.claro #reportAnOutageDialog .number-input-section .dijitTextBox {
	margin-bottom: 16px;
	border-radius: 16px;
	height: 40px;
	width: 290px;
	border: 1px solid var(--centerpoint-light-grey);
	background-color: var(--centerpoint-white);
}
.dark_mode.claro #reportAnOutageDialog .number-input-section .dijitTextBox {
	background-color: var(--centerpoint-snow);
}
.dark_mode.claro #reportAnOutageDialog .number-input-section .dijitTextBox .dijitInputContainer {
	background-color: var(--centerpoint-snow);
}
.claro #reportAnOutageDialog .number-input-section .dijitTextBox .dijitInputField {
	border-radius: 16px;
	padding: 4px 8px;
	box-sizing: border-box;
	height: 100%;
}
.claro #reportAnOutageDialog .number-input-section .dijitTextBox input {
	height: 100%;
	border-radius: 16px;
	color: var(--centerpoint-black);
}
.claro #reportAnOutageDialog .number-input-section .dijitTextBox.dijitValidationTextBoxError {
	border-color: var(--centerpoint-error-red);
	margin-bottom: 8px;
}
.claro #reportAnOutageDialog .number-input-section .dijitTextBox.dijitValidationTextBoxError .dijitValidationContainer {
	margin: 10px;
	background-image: url(../images/ErrorIcon.svg);
	width: 20px;
	height: 20px;
	background-color: transparent;
	border: none;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0;
}
.dark_mode.claro #reportAnOutageDialog .number-input-section .dijitTextBox.dijitValidationTextBoxError .dijitValidationContainer {
	filter: invert(37%) sepia(50%) saturate(4795%) hue-rotate(339deg) brightness(92%) contrast(87%);
}
.claro #reportAnOutageDialog .number-input-section .error-text {
	margin-bottom: 8px;
}
.dijitTooltip {
	display: none;
}
.claro #reportAnOutageDialog .dijitDialogPaneContent .dijitContentPane {
	/* overflow: visible; */
	/* To fix the Visibity issues with Report Modal for some screen Sizes- By Sreeharshan*/
	overflow: auto;
}
.claro #reportAnOutageDialog .acknowledgement-section {
	display: flex;
	margin-bottom: 16px;
	margin-top: 8px;
}
.claro #reportAnOutageDialog .acknowledgement-section label {
	width: 12px;
	height: 12px;
	margin-right: 12px;
	overflow: visible;
	position: relative;
}
.claro #reportAnOutageDialog .acknowledgement-section .dijitCheckBox {
	background-image: none;
}
.claro #reportAnOutageDialog .acknowledgement-section .acknowledgement-check-box {
	border: 2px solid var(--centerpoint-black);
	border-radius: 3px;
	position: absolute;
	background-color: var(--centerpoint-white);
	top: 0;
	width: 100%;
	height: 100%;
}
.claro #reportAnOutageDialog .acknowledgement-section .acknowledgement-check-box:hover {
	background-color: var(--centerpoint-snow);
}
.claro #reportAnOutageDialog .acknowledgement-section .dijitCheckBoxFocused ~ .acknowledgement-check-box {
	border-color: var(--centerpoint-blue);
}
.claro #reportAnOutageDialog .acknowledgement-section .dijitCheckBoxChecked ~ .acknowledgement-check-box:after {
	content: "";
	position: absolute;
	left: 3px;
	top: -1px;
	width: 4px;
	height: 10px;
	border: solid var(--centerpoint-black);
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.claro #reportAnOutageDialog .outage-type-section .dijitSelect {
	width: 290px;
	height: 40px;
	border-radius: 16px;
	border: 1px solid var(--centerpoint-light-grey);
	background-color: var(--centerpoint-white);
	margin-bottom: 16px;
}
.dark_mode.claro #reportAnOutageDialog .outage-type-section .dijitSelect {
	background-color: var(--centerpoint-snow);
}
.claro #reportAnOutageDialog .outage-type-section .dijitSelect .dijitButtonContents { 
	border: none;
	padding-left: 12px;
}
.claro #reportAnOutageDialog .outage-type-section .dijitSelect .dijitArrowButton {
	background: none;
	border-radius: 16px;
	width: 14px;
	padding: 12px;
	border: none;
}
.claro #reportAnOutageDialog .outage-type-section .dijitSelect .dijitArrowButton .dijitArrowButtonInner { 
	width: 14px;
	height: 14px !important;
	background-image: url('../images/DownArrow.svg');
	background-position: center;
	padding: 0;
}
.dark_mode.claro #reportAnOutageDialog .outage-type-section .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
	filter: invert(92%) sepia(2%) saturate(77%) hue-rotate(202deg) brightness(102%) contrast(86%);
}
.claro #reportAnOutageDialog .outage-type-section .dijitSelect .dijitSelectLabel::before {
	content: none;
}
.claro #reportAnOutageDialog .outage-type-section.disabled {
	color: var(--centerpoint-dark-grey) !important;
	pointer-events: none !important;
}
.claro #reportAnOutageDialog .outage-type-section.disabled .dijitSelect {
	background-color: var(--centerpoint-snow);
}
.dark_mode.claro #reportAnOutageDialog .outage-type-section.disabled .dijitSelect {
	background-color: var(--centerpoint-light-grey);
}
.claro #reportAnOutageDialog .outage-type-section.disabled .dijitSelect .dijitArrowButton .dijitArrowButtonInner { 
	filter: invert(95%) sepia(4%) saturate(2091%) hue-rotate(189deg) brightness(90%) contrast(72%);
}
.claro #reportAnOutageDialog .button-row {
	display: flex;
	margin-bottom: 0;
	margin-top: 40px;
}
.claro #reportAnOutageDialog .button-row .button {
	width: 50%;
}
.claro #reportAnOutageDialog .button-row .button.button-secondary {
	margin-right: 16px;
}
.claro #reportAnOutageDialog .outage-submitted {
	margin-top: 16px;
	text-align: center;
}
.claro #reportAnOutageDialog .outage-submitted img {
	margin: auto;
	width: 57px;
	height: 66px;
}
.claro #reportAnOutageDialog .outage-submitted b {
	font-weight: 700;
	display: block;
	margin-top: 16px;
	margin-bottom: 16px;
}
.claro #reportAnOutageDialog .outage-submitted .button {
	margin: 36px auto 0 auto;
}
@media screen and (max-width: 767px) {
	.claro .dialog {
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		padding: 0;
	}
	.claro .dialog .dijitDialogPaneContent {
		padding: 24px;
		width: 100vw !important;
		height: 100vh !important;
		box-sizing: border-box;
	}
	.claro #noSearchResultsDialog .dijitDialogPaneContent {
		height: 161px !important;
		width: 90% !important;
		padding-top: 43px;
		overflow: hidden;
	}
	.claro #reportDlg .dialog-label {
		margin-top: 43px;
	}
	.claro #reportDlg .dialog-label .close-dialog-button {
		margin-bottom: 43px;
	}
	.claro #reportDlg .dijitDialogPaneContent {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}
	.claro .dialog .dijitDialogPaneContent .dijitContentPane {
		width: 100% !important;
		height: 100% !important;
		overflow: hidden;
	}
	.claro #reportDlg .dojoxGrid {
		overflow-x: scroll;
		height: 75% !important;
	}
	.claro #reportDlg .dojoxGrid .dojoxGridMasterHeader {
		min-width: 376px;
	}
	.claro #reportDlg .dojoxGrid .dojoxGridMasterHeader .dojoxGridHeader{
		width: 100% !important;
	}
	.claro #reportDlg .dojoxGrid .dojoxGridView {
		min-width: 376px;
	}
	.claro #reportAnOutageDialog .dijitDialogPaneContent{
		/* height: 100% !important; */
		/* Saud */
		/* height: 680px !important; */
		top: -40px !important;
		height: 90% !important;
	}
	.claro #reportAnOutageDialog .dijitDialogPaneContent .dijitContentPane {
		overflow: scroll;
	}
	.claro #reportAnOutageDialog .number-input-section .dijitTextBox {
		width: 100%;
		box-sizing: border-box;
	}
	.claro #reportAnOutageDialog .outage-type-section .dijitSelect {
		width: 100%;
		box-sizing: border-box;
	}
	.claro #reportAnOutageDialog .outage-submitted {
		margin-top: 64px;
		text-align: center;
	}
}

.pulse {
	display: block;
	border-radius: 50%;
	animation: pulse 2s;
	-webkit-animation: pulse 2s;
	-moz-animation: pulse 2s;
	position: absolute;
	z-index: 1000;
	opacity: 0;
	background-color: #007DB4;
}
.dark_mode .pulse {
	background-color: var(--centerpoint-dark-blue);
}
@keyframes pulse {
	0%  {
		opacity: 0.2;
	}
	100% {
		-webkit-transform: scale(10);
		opacity: 0;
	}
}
@-webkit-keyframes pulse {
	0%  {
		opacity: 0.2;
	}
	100% {
		-webkit-transform: scale(10);
		opacity: 0;
	}
}
@-moz-keyframes pulse {
	0%  {
		opacity: 0.2;
	}
	100% {
		-webkit-transform: scale(10);
		opacity: 0;
	}
}

/* Maintenance page */
.maintenance-notification {
	margin: 100px auto 0 auto;
	max-width: 700px;
	text-align: center;
	padding: 0 24px;
}
.maintenance-notification h1 {
	margin-top: 32px;
	margin-bottom: 32px;
}
.maintenance-notification .button {
	margin: 32px auto 0 auto;
}
.maintenance-notification .twitter-link {
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	color: black;
	text-decoration: none;
}

/* reCaptcha */
.reCaptchaerror {
  border: solid 2px #c64848;
  padding: .2em;
  width: 22em;
}

/* Added  by Saud to keep color same after hyperlink is visited*/
a, a:visited, a:hover, a:active {
  color:  var(--centerpoint-dark-blue);;
}